<template>
  <view class="tvdd">
    <view style="position: fixed; z-index: 8">
      <view class="ullist">
        <view
          :class="{ active: active == index }"
          @click="dzclick(index)"
          v-for="(item, index) in data"
          :key="index"
        >
          {{ item.name }}
        </view>
      </view>
    </view>

    <view class="ddList">
      <view class="dlist" v-for="(itme, index) in ListInfo" :key="index">
        <view class="dhead">
          <text class="color-bf"
            >下单时间：<text style="font-size: 30rpx">{{
              itme.add_time
            }}</text></text
          >
          <text class="color-bf" v-if="itme.order_state == 10">待付款</text>
          <text class="color-bf" v-if="itme.order_state == 20">已完成</text>
          <!-- <text class="color-bf" v-if="item.order_state==10">待付款</text>
					<text class="color-bf" v-if="item.order_state==20">已完成</text> -->
        </view>
        <!-- 订单内店铺循环 -->
        <view>
          <!-- <view class="dptitle">
						<view v-if="store.store_name!=''">
							<image src="/static/images/dplogo.png" mode=""></image><text>{{store.store_name}}</text>
						</view>
					</view> -->
          <!-- <view class="flexBox" style="width: 100%;">
						<view style="font-size: 26rpx;">订单号：{{store.order_sn}}</view>
						<text class="" v-if="!store.if_cancel" style="color: #ff4300;">{{store.order_state_txt}}</text>
					</view> -->

          <!-- 店铺内订单循环 -->
          <view>
            <view class="dcont ptb">
              <view class="m-r10">
                <image :src="`${picUrl}/privilege_vip.png`" mode=""></image>
              </view>

              <view class="cont">
                <text class="clamp wdth ft-24">皖集采M店体验会员</text>

                <view class="ds-flex ft-24 flexBox" style="margin-top: 10rpx">
                  <view class=""> </view>

                  <!-- <view class="">
										<text
											class="tousu" @click.stop="tousu(order.rec_id,store.order_id)">去开票</text>
									</view> -->
                </view>
              </view>
              <!-- <view class="contf">
								<view class="text-rg"><text
										style="font-size: 24rpx;margin-right: 5rpx;">¥</text>{{order.goods_price}}
								</view>
								<view style="font-size: 26rpx;color: #B2B2B2;">x{{order.goods_num}}</view>
							</view> -->
            </view>
          </view>
          <!-- 共{{itme.goods_num}}件商品 -->
          <view class="" style="display: flex; justify-content: space-between">
            <view style="text-align: left">订单编号：{{ itme.order_sn }}</view>
            <view
              class=""
              style="text-align: right"
              v-if="itme.order_state == 10"
            >
              <text class="ptbot" @click="quxiadd(itme.order_id, index)"
                >取消订单</text
              >
            </view>
            <!-- <view class="" style="text-align: right;" v-if="itme.order_state==20">
							<text class="ptbot" @click="kaipiao(itme.order_id,index)">去开票</text>
						</view> -->
          </view>
          <!-- {{itme.order_list[0].tail_pay_start_time +" "}}{{Time+" "}}{{itme.order_list[0].tail_pay_end_time}} -->
          <!-- <view class="tijiao">
						
						<view class="" style="display: flex;justify-content: flex-start;color:#ff4300"
							v-if="findStoreOrder(itme.order_list)!='-1'&&store_index==itme.order_list.length-1&&itme.pay_amount!=undefined">
							共计:{{parseFloat(itme.pay_amount).toFixed(2)}}
						</view>
						<view class="flex">

							<text class="ysbot">去付款</text>
							<text class="ptbot">退款</text>
							<text v-if="store.if_deliver" @click="wuliu(itme)" class="ptbot">查看物流</text>

						</view>

					</view> -->
        </view>
      </view>
    </view>
    <view class="None" v-if="isBlank <= 0">
      <image
        style="width: 100%"
        :src="`${picUrl}/InfoNull.png`"
        mode="widthFix"
      ></image>
    </view>

    <uni-popup type="center" ref="cancel">
      <view class="popup-open">确认取消该订单吗？</view>
      <view class="buttons">
        <view style="color: #000" @click="close">取消</view>
        <view
          style="color: #fff; background-color: #ff0000ba"
          @click="confirmCancel"
          >确认</view
        >
      </view>
    </uni-popup>
    <go-top :isShow="isShow"></go-top>
  </view>
</template>

<script>
import goTop from "@/components/go-top/go-top.vue";
export default {
  components: {
    goTop,
  },
  data() {
    return {
      hasmore: false,
      active: 0,
      istype: 2,
      isfuk: 1,
      ListInfo: [], //订单列表
      isBlank: 1, //判断是否显示
      data: [
        {
          name: "全部",
          order_state: "",
        },
        {
          name: "待付款",
          order_state: "10",
        },
        {
          name: "已完成",
          order_state: "20",
        },
      ],
      curpage: 1,
      Time: "",
      order_state: "",
      TimeList: [],
      goods_name: "",
      Times: [],
      likeList: [],
      isShow: false, //返回顶部火箭头
      orderId: "",
    };
  },
  onShow() {},
  onLoad(e) {
    this.$nextTick(function () {
      this.Getlist();
    });
    // this.Times.map((item)=>{
    // 	clearInterval(item);
    // })
  },

  onBackPress(options) {},
  onReachBottom() {},
  methods: {
    input(e) {
      console.log(e);
    },
    dzclick(id) {
      //切换nav
      this.active = id;
      this.goods_name = "";
      this.ListInfo = []; //清空订单信息
      this.likeList = []; //请空猜你喜欢
      this.isBlank = 1; //更新空状态
      this.order_state = this.data[id].order_state;
      this.Getlist(true);
    },
    Getlist(id) {
      //获取订单列表
      //id为true代表重新刷新 不存在则为下一页
      let that = this;
      this.$util
        .request({
          url: "/mobile/index.php?act=member_order&op=privilege_list",
          method: "get",
          data: {
            order_state: that.order_state,
          },
        })
        .then(function (res) {
          if (res.error_code == 0) {
            that.ListInfo = res.datas.list;
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    goodsInfo(id) {
      uni.navigateTo({
        url: "/mall/goods/info?goods_id=" + id,
      });
    },
    limit(e) {
      if (!e) {
        e = 0;
      }
      let data = Date.now();
      // console.log(data);
      this.ListInfo.map((item, index) => {
        item.order_list.map((item1, index1) => {
          if (item1.order_state == 10) {
            item1.daoji = this.shijian(Number(item1.cancel_time) * 1000 - data);
          }
        });
      });
      this.$forceUpdate();
      // console.log(this.ListInfo);
      setTimeout(() => {
        this.limit(1000);
      }, 1000);
    },
    shijian(e) {
      // console.log(e);
      if (e < 0) {
        return "00" + ":" + "00" + "后自动取消";
      } else {
        // console.log(e);
        var m = parseInt((e / (1000 * 60)) % 60);
        var s = parseInt((e / 1000) % 60);
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;
        return m + ":" + s + "后自动取消";
      }
    },
    search() {
      // if(this.goods_name){
      this.Getlist(true);
      // }
    },
    //去投诉
    tousu(goods_id, order_id) {
      uni.navigateTo({
        url:
          "/member/complain/add?goods_id=" + goods_id + "&order_id=" + order_id,
      });
    },
    //去评价
    goPinJia(goods_id, order_id) {
      uni.navigateTo({
        url:
          "/member/evaluate/add?goods_id=" + goods_id + "&order_id=" + order_id,
      });
    },
    //退款
    refund(id) {
      uni.navigateTo({
        url: "/member/aftermarket/Exchange?order_id=" + id,
      });
    },
    //order_id获取
    obtain(item) {
      let id = [];
      for (let i = 0; i < item.order_list.length; i++) {
        for (let j = 0; j < item.order_list[i].goods_list.length; j++) {
          id.push(item.order_list[i].goods_list[j].order_id);
        }
      }
      return (id = id.join(","));
    },
    //确认收货
    confirmGoods(item) {
      uni.showModal({
        title: "提示",
        content: "确认收货？",
        success: (res) => {
          if (res.confirm) {
            let id = this.obtain(item);
            this.$util
              .request({
                url: "/mobile/index.php?act=member_order&op=order_receive",
                method: "POST",
                data: {
                  order_id: id,
                },
              })
              .then((res) => {
                if (res.error_code == 0) {
                  uni.showToast({
                    title: "收货成功！",
                  });
                  this.active = 4;
                } else {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                  });
                }
                this.curpage = 1;
                this.Getlist(true);
              });
          }
        },
      });
    },
    //查看物流
    wuliu(store, rec_id) {
      // let id=this.obtain(item)
      uni.navigateTo({
        url: "/plug/logistics/info?order_id=" + store.order_list[0].order_id,
      });
    },
    //去付款
    goPay(sn, moeny, pay_tail) {
      uni.navigateTo({
        url:
          "/plug/pay/cashier?pay_sn=" +
          sn +
          "&moeny=" +
          moeny +
          "&order_sn=" +
          "&pay_tail=" +
          pay_tail,
      });
    },
    //进入商品详情页面
    goOrderInfo(id) {
      uni.navigateTo({
        url: "orderInfo?order_id=" + id,
      });
    },
    //打开取消订单弹窗
    quxiadd(orderId, listIndex) {
      this.orderId = orderId;
      this.$refs.cancel.open();
    },
    //弹窗取消
    close() {
      this.$refs.cancel.close();
    },
    //确认取消
    confirmCancel() {
      this.$util
        .request({
          url: "/mobile/index.php?act=member_order&op=privilege_cancel",
          method: "POST",
          data: {
            order_id: this.orderId,
          },
        })
        .then((res) => {
          if (res.error_code == 0) {
            this.$refs.cancel.close();
            this.Getlist(true);
            uni.showToast({
              title: "订单已取消！",
            });
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    //猜你喜欢
    youLike() {
      this.$util
        .request({
          url: "/mobile/index.php?act=member_index&op=get_guesslike",
          method: "",
          data: {},
        })
        .then((res) => {
          if (res.error_code == 0) {
            this.likeList = res.datas;
          } else {
            // uni.showToast({
            // 	title:res.message,
            // 	icon:"none"
            // })
          }
        });
    },
  },
  watch: {
    active(val, oldVal) {
      this.Times.map((item) => {
        clearInterval(item);
      });
    },
  },
  computed: {},
  destroyed() {
    this.Times.map((item) => {
      clearInterval(item);
    });
  },
};
</script>

<style lang="scss" scoped>
.Ce13d97 {
  color: #ff4300;
}

.twoline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.products {
  padding: 0 24upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  /* margin-top: 27upx; */
}

.product {
  position: relative;
  box-sizing: border-box;
  width: 346upx;
  height: 487upx;
  border: 1upx solid #f4f4f4;
  margin-top: 10upx;
  border-radius: 15upx;
  background-color: #ffffff;
}

.product .ImgBox {
  width: 336upx;
  height: 340upx;
  overflow: hidden;
}

.product image {
  border-top-left-radius: 10upx;
  border-top-right-radius: 10upx;
  width: 336upx;
  height: 340upx;
}

.productInfo {
  padding: 0 10upx;
  height: 84upx;
  line-height: 40rpx;
}

.productP {
  padding: 0 10upx;
}

/* .flex{
		display: ;
	} */
.tousu {
  border: 1rpx solid #999;
  padding: 5rpx 15rpx;
  margin-left: 20rpx;
  border-radius: 10rpx;
}

.flex_warp {
  display: flex;
  flex-wrap: wrap;
}

.ptbot:first-child {
  margin-left: 40rpx;
}

.mar {
  margin-right: 20rpx;
}

.zengpin {
  padding: 2rpx 15rpx;
  border-radius: 5px;
  color: #ffffff;
  background-color: #ff4300;
  font-size: 26rpx;
  margin-right: 20rpx;
}

.flexBox {
  width: 450rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods_spec {
  font-size: 24rpx;
  color: #666666;
  margin-top: 4rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.tuihuo {
  background-color: #cccccc;
  color: #ffffff;
  padding: 10rpx 10rpx;
  border-radius: 5px;
  margin-right: 10rpx;
  text-align: center;
  line-height: 20px;
  height: 40rpx;
  margin-top: 6rpx;
  font-size: 24rpx;
  width: 55px;
  margin-left: 20rpx;
}

.tuikuan {
  background-color: #ff4300;
  color: #ffffff;
  padding: 10rpx 15rpx;
  /* 	border: 0.5px solid #979696; */
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  height: 40rpx;
  margin-top: 15rpx;
  font-size: 24rpx;
  width: 55px;
  margin-left: 20rpx;
}

.None {
  font-weight: bold;
  text-align: center;
  /* margin: 40rpx 0; */
  font-size: 30rpx;
}

.ptb {
  padding: 20upx 10upx 0;
}

.ft-25 {
  font-size: 25upx;
}

.ft-23 {
  font-size: 24upx !important;
}

.m-r10 {
  margin-right: 10upx;
}

/* .text-rg{
		text-align: right;
	} */
.color-bf {
  color: #ff4300;
}

.ds-flex {
  display: flex;
}

.clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 底部 */
.tijiao {
  color: #333;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10upx;
  /* border:0px !important; */
  border-top: 1px solid #f0f0f0;
  margin-top: 10upx;
  margin-bottom: -20rpx;
  padding: 20rpx 0;
}

.tijiao > view {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.tijiao > view > view {
  /* margin-right:50upx; */
}

.ptbot {
  padding: 10upx;
  border: 1upx solid #979696;
  border-radius: 10upx;
  /* margin-left:23upx; */
  text-align: center;
  line-height: 40upx;
  width: 110rpx;
  margin-left: 10rpx;
}

.tijiao .ysbot {
  padding: 10upx;
  border-radius: 10upx;
  margin-left: 23upx;
  text-align: center;
  line-height: 40upx;
  width: 110rpx;
  color: #fff;
  background: #ff4300;
}

.tijiao view:first-of-type {
  font-size: 24upx !important;
}

.tijiao view:last-of-type {
  font-size: 24upx !important;
}

/* 订单列表 */

.ddList .dlist .dcont .wdth {
  min-width: 330upx;
  height: 90upx;
}

.ddList .dlist .dcont .cont {
  min-width: 330upx;
}

.ddList .dlist .dcont {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  font-size: 22upx;
}

.ddList .dlist .dcont image {
  width: 172upx;
  height: 172upx;
}

.ddList .dlist .dptitle text:first-child,
.ddList .dlist .dcont .contf {
  color: #333;
  height: 100%;
}

/* 切换 */
.ullist {
  display: flex;
  font-size: 24upx;
  justify-content: space-around;
  color: #333;
  padding: 15upx 0;
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 99999999;
}

.ullist .active {
  color: #ff4300;
  padding-bottom: 10upx;
  border-bottom: 2upx solid #ff4300;
}

.contf {
  text-align: right;
  width: 120px;
}

/* .dcont .contf .ft-23.ds-flex{
	margin-top: 40rpx;
} */
.ddList .dlist .dptitle {
  font-size: 26upx;
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  /* padding:30upx; */
}

.ddList .dlist .dptitle image {
  width: 28upx;
  height: 24upx;
  margin-right: 10upx;
}

.ddList {
  /* margin:28upx; */
  font-size: 22upx;
  padding: 28upx;
}

.ddList .dlist .dhead .fx {
  color: #666;
}

.ddList .dlist {
  padding: 25upx;
  background-color: #fff;
  border-radius: 30upx;
  margin-bottom: 40upx;
  margin-top: 80upx;
}

.ddList .dlist .dhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26upx;
  color: #333;
  padding-bottom: 10rpx;
  /* padding:15upx; */
}

.ddList .dlist .dhead image {
  width: 29upx;
  height: 29upx;
  margin-left: 10upx;
}

.zk {
  /* width: 80upx; */
  padding: 0 15upx;
  height: 40upx;
  background-color: #ff4300;
  color: #ffffff;
  text-align: center;
  line-height: 40upx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-left-radius: 10upx;
}
/deep/ .uni-popup__wrapper-box {
  width: 540rpx;
  height: 280rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.popup-open {
  font-size: 34rpx;
  text-align: center;
  margin-top: 30rpx;
  color: #000;
}

.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin-top: 60rpx;

  view {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    height: 70rpx;
    width: 45%;
    background-color: #eeeeee;
    border-radius: 40rpx;
  }
}
</style>